<template>
    <el-table :data="filterTableData" style="width: 100%">
        <el-table-column label="商品图片" prop="skuPicture">
            <template v-slot:default="{ row }">
                <img :src="row.skuPicture" style="width: 130px; " />
            </template>
        </el-table-column>
        <el-table-column label="商品名" prop="skuName" width="200px"/>
        <el-table-column label="价格" prop="price" width="100px"/>
        <el-table-column label="收货人" prop="consignee" width="100px"/>
        <el-table-column label="手机号" prop="phoneNumber" width="150px"/>
        <el-table-column label="地址" prop="detailAddress" width="200px"/>
        <el-table-column label="数量" prop="num" width="50px"/>
        <el-table-column label="支付状态" prop="payFlag" width="100px">
            <template v-slot:default="{ row }">
                <span v-if="row.payFlag === 1">已支付</span>
                <span v-if="row.payFlag === 0">未支付</span>
            </template>
        </el-table-column>
        <el-table-column align="right" >
            <template #header>
                <el-input v-model="search" size="small" placeholder="Type to search" />
            </template>
            <template #default="scope">
                <!-- <el-button size="small" @click="handleComment(scope.$index, scope.row)"
                    v-if="scope.row.payFlag === 1">评价</el-button> -->
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
                    v-if="scope.row.payFlag === 0">去支付</el-button>
                

                <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" :icon="InfoFilled" icon-color="#626AEF"
                    title="Are you sure to delete this?" @confirm="handleDelete(scope.$index, scope.row)" @cancel="cancelEvent">
                    <template #reference>
                        <el-button size="small" type="danger">删除订单</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
</template>
  
<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import api from '@/api'
import { ElNotification } from 'element-plus';
import store from '@/store';
import { useRouter } from 'vue-router';
import { InfoFilled } from '@element-plus/icons-vue'

const router = useRouter()

const cancelEvent = () => {
  console.log('cancel!')
}

const search = ref('')
const filterTableData = computed(() =>
    orsersList.value.filter(
        (data) =>
            !search.value ||
            data.skuName.toLowerCase().includes(search.value.toLowerCase())
    )
)


const handleComment = (index: number, row: any) => {
    router.push({
        name: 'addcomment',
        params: {
            id: row.id
        }
    });
}
const handleEdit = (index: number, row: any) => {
    router.push({
        name: 'orderspay',
        params: {
            id: row.id
        }
    });
}
const handleDelete = (index: number, row: any) => {
    api.orders.deleteOrdersById({ id: row.id })
        .then(response => {
            // 在这里可以处理提交成功后的逻辑
            getOrdersListByUserId()
            ElNotification({
                title: 'Success',
                message: response.data.msg,
                type: 'success',
                duration: 1500
            })


        })
        .catch(error => {
            ElNotification({
                title: 'Error',
                message: error.data.msg,
                type: 'error',
                duration: 1500
            })
            // 在这里可以处理提交失败后的逻辑
        });
}


const orsersList = ref([
    {
        id: '',
        skuName: '',
    }
])

onMounted(() => {
    getOrdersListByUserId()
})

function getOrdersListByUserId() {
    api.orders.getOrdersListByUserId({ userId: store.getters.getUserInfo.id })
        .then(response => {
            // 在这里可以处理提交成功后的逻辑
            orsersList.value = response.data.data

        })
        .catch(error => {
            ElNotification({
                title: 'Error',
                message: error.data.msg,
                type: 'error',
                duration: 1500
            })
            // 在这里可以处理提交失败后的逻辑
        });
}
</script>
  